<!--  -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="总运单ID">
                <el-input v-model="formInline.ids" placeholder="请输入ID"></el-input>
            </el-form-item>
            <el-form-item label="分运单ID">
                <el-input v-model="formInline.yund_id" placeholder="请输入ID"></el-input>
            </el-form-item>
            <el-form-item label="司机姓名">
                <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="formInline.phone" placeholder="请输入电话"></el-input>
            </el-form-item>

            <el-form-item label="公司名称">
                <!-- <el-input v-model="formInline.company_name" placeholder="请输入公司名称"></el-input> -->
                <el-select v-model="formInline.company_name" placeholder="选择公司名称" clearable @change="selectCompanyName">
                    <el-option v-for="(item, index) in ahCompanyList" :label="item" :value="item"
                        :key="index"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="车牌号">
                <el-input v-model="formInline.plate" placeholder="请输入车牌号"></el-input>
            </el-form-item>
            <!-- <el-form-item label="状态">
                <el-select v-model="formInline.bill_status" placeholder="选择公司名称">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="进行中" value="1"></el-option>
                    <el-option label="暂停" value="2"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="始发地">
                <el-cascader v-model="searchAddressStart" :props="{ checkStrictly: true }" clearable
                    :options="regionData" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="终点">
                <el-cascader v-model="searchAddressEnd" :props="{ checkStrictly: true }" clearable :options="regionData"
                    style="width: 100%;" />
            </el-form-item>

            <el-form-item label="所属地区">
                <el-select v-model="formInline.area_status" placeholder="选择所属公司" @change="selectArea">
                    <el-option label="全部" :value="-1"></el-option>
                    <el-option v-for="(item, index) in getOfficesList" :key="item" :label="item"
                        :value="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="搜索公司">
                <el-input v-model="formInline.company_search" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="发布时间">
                <el-date-picker v-model="pickerDateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd"
                    @change="(value) => changeDatePicker(value, 1)"></el-date-picker>
            </el-form-item>
            <el-form-item label="卸货时间">
                <el-date-picker v-model="pickerDateArrDown" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                    @change="(value) => changeDatePicker(value, 2)"></el-date-picker>
            </el-form-item>


        </CustomForm>

        <CustomDescriptions :data="descriptionsData" :styleBox="{ width: '60%' }"></CustomDescriptions>

        <el-table :data="list" style="width: 100%" height="534" v-loading="tableLoading">
            <el-table-column prop="area_company" label="所属地区" width="100" align="center">
            </el-table-column>

            <el-table-column prop="id" label="运单ID" width="80" align="center">
            </el-table-column>
            <el-table-column prop="ship_address" label="始发地" width="160" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="to_address" label="终点" width="160" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="username" label="公司名称" width="160" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="goods" label="货物名称" align="center" :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column prop="weight" label="重量(吨)" align="center">
            </el-table-column>
            <el-table-column prop="sy_weight" label="剩余重量(吨)" width="100" align="center">
            </el-table-column>
            <el-table-column prop="price" label="运费(元)" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <!-- <el-table-column prop="phone" label="联系方式" width="120" align="center">
            </el-table-column> -->
            <el-table-column prop="ysz" label="运输中" width="80" align="center">
                <template slot-scope="scope">
                    <span style="color:blue">{{ scope.row.ysz }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="dth" label="待提货" width="80" align="center">
                <template slot-scope="scope">
                    <span style="color:red">{{ scope.row.dth }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="dsh" label="待审核" width="80" align="center">
                <template slot-scope="scope">
                    <span style="color:green">{{ scope.row.dsh }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="djs" label="待结算" width="80" align="center">
                <template slot-scope="scope">
                    <span style="color:orangered">{{ scope.row.djs }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.pause == 1" style="color: #F56C6C;">暂停</span>
                    <span v-else-if="scope.row.status == '0'" style="color:red">未接单</span>
                    <span v-else-if="scope.row.status == '1'">部分接单</span>
                    <span v-else-if="scope.row.status == '2'">已接单</span>
                    <span v-else-if="scope.row.status == '3'" style="color:green">运输中</span>
                    <span v-else-if="scope.row.status == '4'" style="color:green">运输中</span>
                    <span v-else-if="scope.row.status == '5'" style="color:green">运输中</span>
                    <span v-else-if="scope.row.status == '6'">结算</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" @click="waybillShow(scope.$index, scope.row)" size="mini">运单跟踪</el-button>
                    <el-button type="primary" v-if="scope.row.pause == 0" @click="waybillSuspend(1, scope.row)"
                        size="mini">暂停</el-button>
                    <el-button type="primary" v-else @click="waybillSuspend(0, scope.row)" size="mini">取消暂停</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>

        <el-dialog title="查看运单信息" class="show-dialog-waybill" top="5vh" :visible.sync="dialogVisible" width="80%">
            <dialogWaybillList v-if="dialogVisible" :id="waybillDetail.id">
            </dialogWaybillList>
        </el-dialog>
    </div>
</template>

<script>
import { regionData } from "element-china-area-data";
import { getCodeToText, getOfficesList } from '@/utils/tool';
import dialogWaybillList from './components/dialogWaybillList.vue'
import { getBillList, getAhCompanyList, pauseOrder } from '@/api/waybill';
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        dialogWaybillList
    },
    data() {
        //这里存放数据
        return {
            getOfficesList: getOfficesList(),
            formInline: {
                ids: "",
                yund_id: "",
                name: "",
                phone: "",
                plate: "",
                sfd: "",
                zd: "",
                company_search: "",
                company_name: "",
                bill_status: "0",//0全部1进行中2暂停
                time: "",
                reach_time: "",//卸货时间
                start_province: "",
                start_city: "",
                end_province: "",
                end_city: "",
                page: 1,
                pageSize: 10,
                area_status: 0,//安阳总公司
            },
            descriptionsData: [
                {
                    label: "总共运单数量",
                    count: 0,
                    unit: "(单)"
                },
                {
                    label: "运单总运费",
                    count: 0,
                    unit: "(元)"
                },
            ],
            searchAddressStart: '',
            searchAddressEnd: '',
            pickerDateArr: "",
            pickerDateArrDown: "",
            regionData,
            list: [],
            ahCompanyList: [],
            count: 0,
            allMoney: '',
            tableLoading: false,

            waybillDetail: {
                hpic: "",
                qrcode: "",
                id: "",
            },
            dialogVisible: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        searchAddressStart: {
            handler(newV, oldV) {
                let res = getCodeToText(newV);
                this.formInline.start_province = '';
                this.formInline.start_city = '';
                this.formInline.sfd = '';

                if (newV.length >= 1) {
                    this.formInline.start_province = res[0];
                }
                if (newV.length >= 2) {
                    if (res[0].includes('市')) {
                        this.formInline.start_city = res[0];
                    } else {
                        this.formInline.start_city = res[1].substring(0, res[1].length - 1);
                    }
                }
                if (newV.length == 3) {
                    this.formInline.sfd = newV[2]
                }
            }
        },
        searchAddressEnd: {
            handler(newV, oldV) {
                let res = getCodeToText(newV);
                this.formInline.end_province = '';
                this.formInline.end_city = '';
                this.formInline.zd = '';

                if (newV.length >= 1) {
                    this.formInline.end_province = res[0];
                }
                if (newV.length >= 2) {
                    if (res[0].includes('市')) {
                        this.formInline.end_city = res[0];
                    } else {
                        this.formInline.end_city = res[1].substring(0, res[1].length - 1);
                    }
                }
                if (newV.length == 3) {
                    this.formInline.zd = newV[2]
                }
            }
        },
        'formInline.company_search': {
            handler(newV, oldV) {
                if (newV) {
                    this.formInline.company_name = "";
                }
            }
        }
    },
    //方法集合
    methods: {
        onSubmit(data) {
            this.formInline.page = 1;
            this.getBillList();
        },
        resetTable() {
            this.formInline = {
                ids: "",
                yund_id: "",
                name: "",
                phone: "",
                plate: "",
                sfd: "",
                zd: "",
                company_search: "",
                company_name: "",
                bill_status: 0,//0全部1进行中2暂停
                time: "",
                reach_time: "",//卸货时间
                page: 1,
                pageSize: 10,
                area_status: 0,
            };
            this.searchAddressStart = [];
            this.searchAddressEnd = [];
            this.pickerDateArrDown = "";
            this.pickerDateArr = "";
            this.getBillList();
        },
        async getBillList() {
            this.tableLoading = true;
            let res = await getBillList({
                ...this.formInline,
            });
            if (res.code == 200) {
                this.list = res.data.list;
                this.count = res.data.count;
                this.descriptionsData[0].count = res.data.count;
                this.descriptionsData[1].count = res.data.money;
            }
            this.tableLoading = false;

        },
        async getAhCompanyList() {
            let res = await getAhCompanyList();
            if (res.code == 200) {
                this.ahCompanyList = res.data;
            }
        },
        changeDatePicker(data, tip) {
            if (tip == 1) {
                if (!data) {
                    this.formInline.time = '';
                } else {
                    this.formInline.time = data.join(' - ');
                }
            } else if (tip == 2) {
                if (!data) {
                    this.formInline.reach_time = '';
                } else {
                    this.formInline.reach_time = data.join(' - ');
                }
            }
            this.getBillList();
        },
        selectCompanyName(value) {
            this.formInline.company_search = '';//搜索和选择公司不能同时使用
            this.getBillList();
        },
        handleSizeChange(val) {
            this.formInline.pageSize = val;
            this.getBillList();
        },
        handleCurrentChange(val) {
            this.formInline.page = val;
            this.getBillList();
        },
        async waybillSuspend(status, row) {//暂停运单
            let res = await pauseOrder({
                type: status,
                id: row.id
            })
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.getBillList();
            }

        },
        waybillShow(index, row) {
            this.waybillDetail.id = row.id;
            this.dialogVisible = true;
        },

        selectArea() {
            this.getBillList();
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getBillList();
        this.getAhCompanyList();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
::v-deep .el-table .el-table__cell {
    padding: 10px 0;
}

::v-deep .el-pagination {
    margin-top: 20px;
}





::v-deep .el-table .el-table__cell {
    padding: 10px 0;

    .cell {
        padding-left: 2px;
        padding-right: 2px;
    }
}
</style>